<template>
  <el-container> 
    <el-header>
      <div class="search" @click="search">
           <input id='input' type="text" placeholder="搜索一下">
            <i class="el-icon-search" ></i>
      </div>
    </el-header>
    <el-main>
        <div id="banner"><img src="../../assets/images/product_banner.png" alt=""></div>
    </el-main>
    <el-main>
    <ul class="banner-product">
      <!-- <span class="">智能科技</span>
      <span @click="star">明星产品</span> -->
      <li v-for="(item,index) in navlist" :class="{actived:num==index}" @click='tab(index)' :key="index">
         {{item}}
      </li>
    </ul>
    <ul class="product-list" v-show="num==0">
      <li v-for="(item,i) in aiProduct" :key="i"  >
          <div>
            <img :src="'static/images/'+item.product_p" alt=""  @click="details(item)">
          </div>
          <p style="font-size:16px">{{item.name}}</p>
           <h4>￥{{item.price}}</h4>
          <div class="price">
              <span>￥{{item.newprice}}</span>
              <!-- 加入购物车 -->
              <span class="el-icon-shopping-cart-2" style="font-size:25px;color:orange;" @click="addCar(item)"></span>
          </div>
      </li>
    </ul>
    <ul class="product-list" v-show="num==1">
      <li v-for="(item,i) in starProduct" :key="i"  >
          <div>
            <img :src="'static/images/'+item.product_p" alt="" @click="details(item)">
          </div>
          <p>{{item.name}}</p>
           <h4>￥{{item.price}}</h4>
          <div class="price">
              <span>￥{{item.newprice}}</span>
              <span class="el-icon-shopping-cart-2" style="font-size:25px;color:orange;" @click="addCar(item)" ></span>
          </div>
      </li>
    </ul>
    </el-main>
    <el-main>
      <div class="hotBox">
        <div>
          <h4><span>拼团热卖</span></h4> 
        </div>
        <div>
            <img src="../../assets/images/home_product01.png" alt="">
              <p>智能摄像机云台版</p>
              <p>已购20件</p>
              <div>
                <span>￥1000</span>
                <span>去拼团</span>
              </div>
        </div>
       </div>
    </el-main>
    <el-main>
       <div class="footerBox" >
         <h4><span>优惠商品</span></h4>
         <ul>
           <li v-for='(item,i) in hotProduct' :key="i">
             <img :src="'/static/images/'+item.product_p" alt="" @click="details(item)">
             <div>倒计时</div>
             <div>
               <span style="font-size:14px;
             ">{{item.name}}</span>
               <h5 style="font-size:16px; color">￥{{item.newprice}}</h5>
               <div>
                <span>￥{{item.price}}</span>
                <span @click="addCar(item)">抢</span>
               </div>
              </div>
           </li>
         </ul>
       </div>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>
<script>
export default {
    data(){
      return {
        num:0,
        navlist:['智能商品','明星产品'],
        allProduct:[],//所有商品
        aiProduct:[],//智能商品
        starProduct:[],//明星产品
        hotProduct:[],//热销产品
      
      }
    },
    methods:{
      tab (index){//选项卡
          this.num = index;
      },
      details(item){//vuex传参---商品详情
        this.$store.commit('getDetails',item);
        // console.log(item);
        this.$router.push('/details')
      },
      addCar(item){
        this.$store.commit('addCar',item);
        // console.log(item);
        this.$router.push('/shopcar')
      },
      search(){//跳转搜索页面
        this.$router.push('/search');
      },
      getAllProduct(){
      this.$http.post("api/users/getAll").then(data=>{
      if(data.data.errCode==0){
        this.allProduct=data.data.allProduct;
        this.aiProduct = this.deepCopy(this.allProduct).filter(item=>item.kind == "aiProduct");
        this.starProduct = this.deepCopy(this.allProduct).filter(item=>item.kind == "starProduct");
        this.hotProduct = this.deepCopy(this.allProduct).filter(item=>item.kind == "hotProduct");
         }
        //  console.log(this.allProduct);
        //  console.log(this.aiProduct);
      })
      },
 
      deepCopy(obj){
         return obj.map(item=>Object.assign(item));
      }
    },
    created(){
      this.getAllProduct();//获取所有的商品
    }
 
}
</script>
<style lang="scss" scoped>
.el-header{

  width: 100%;
  height: 60px;
  background-color: rgb(255,138,69);
  .search{
  height: 35px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 20px;
  input{
    margin-left: 15px;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
    width: 85%;
    color: #999;
    text-indent: 0.4rem;
    border: none;
    outline: none;
  }
  input::-webkit-input-placeholder{
    font-size: 15px;
  }
  i{
    color:  rgb(255,138,69);
    font-size: 18px;
  }
}
}
.el-main:nth-of-type(1){
    box-sizing: border-box;
   background-color: #f0f0f0;
   padding: 6px  0px!important;
   padding-top: 10px !important;
  #banner{
    img{
      width: 100%;
      height: 150px;
    }
  }
}
.el-main:nth-of-type(2){
  padding: 10px 0;
  .banner-product{
    width: 100%;
    height: 35px;
    position: relative;
    border-bottom: 2px solid lightgray;
     li{
      display: inline-block;
      width: 80px;
      font-size: 16px;
      text-indent: .7rem;
      
    }
    li.actived:before{
      content:'';
      display: block;
      position: absolute;
      width: 65px;
      height: 3px;
      margin-left: 12px;
      bottom: 5px;
      background-color: rgb(231, 134, 54);
    }
  }
  .product-list{
    padding: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
      margin-bottom: 15px;
      width: 165px;
      height: 240px;
      border: 1px solid lightgray;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      box-shadow: 8px 2px 6px #f3f3f3;
      &>div img{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        width: 100%;
        height: 150px;
      }
      &>p{
        font-size: 18px;
        padding-top: 10px;
        height: 20px;
        text-indent: .5em;
        width: 150px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
       h4{
          float: left;
          transform: translate(50%,20%);
          overflow: hidden;
          color: red;
        }
      &>div.price{
        height: 40px;
        bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        span{
          position: relative;
          line-height: 35px;
          &:nth-of-type(1){
            text-decoration: line-through;
          }
          
        }

      }
    }
  }
}
.el-main:nth-of-type(3){
  padding: 10px 0 !important;
  background-color: #f0f0f0;
  .hotBox{
    width: 100%;
    height: 300px;
    background-color: #fff;
    >div:nth-of-type(1){
      h4{
        font-size: 18px;
        text-align: center;
        box-sizing:border-box;
        padding: 0 20%;
        span{
          margin-top: 10px;
          display: inline-block;
          background: #fff;
          padding: 0 10px 0 10px;
          position: relative;
        }
      }
      h4::before{
        content: '';
        display: block;
        height: 1px;
        padding:0 50%;
        background-color: #333;
        position: relative;
        top: 25px;/*调节线高*/
        left: 0;
      }
    }
    >div:nth-of-type(2){
      margin: 20px 20px;
      padding: 0 10px;
      overflow: hidden;
      height: 240px;
      box-sizing: border-box;
      border: 1px solid #f0f0f0;
      border-radius: 5px;
      box-shadow: -3px 3px 3px #f0f0f0;
      img{
        width: 130px;
        display: block;
        margin: auto;
      }
      >p{
        color: #353535;
        line-height: 30px;
        &:nth-of-type(1){
          padding-top: 10px;
        }
        &:nth-of-type(2){
          color: #999;
        }
      }
      div{
        display: flex;
        justify-content: space-between;
        span{
          &:nth-of-type(1){
            font-size: 18px;
            line-height: 30px;
            color: #FF7214;
          }
          &:nth-of-type(2){
            border: 1px solid #ff7214;
            padding: 2px 5px;
            border-radius: 8px;
            color: #FF7214;
          }
        }
      }
    }
  }
}
.el-main:nth-of-type(4){
    width: 100%;
    height: auto;
    padding: 0px !important;
    background: #fff;
    // position: relative;
     h4{
        width: 375px;
        height: 35px;
        font-size: 18px;
        text-align: center;
        position: absolute;
        box-sizing:border-box;
        padding: 0 20%;
        span{
          margin-top: 10px;
          display: inline-block;
          background: #fff;
          padding: 0 10px 0 10px;
          position: relative;
        }
         &::before{
          content: '';
          display: block;
          height: 1px;
          background-color: #333;
          position: relative;
          top: 25px;/*调节线高*/
          left: 0;
      }
    }
    ul{
      width: 100vw;
      padding-top: 40px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      
      justify-content: space-between;
      li{
        width: 160px;
        height: 240px;
        flex: 0 1 auto;
        margin-right: 10px;
        // background-color: red;
        border: 3px solid #f3f3f3;
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 1px 3px 30px #f0f0f0;
        img{
          width: 140px;
          height: 140px;
        }
        >div:nth-of-type(1){
          width: 140px;
          height: 20px;
          float: left;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
          transform: translateY(-20px);
          text-align: center;
          background: rgba(0,0,0,.5);
          color: #fff;
          font-size: 12px;
        }
        >div:nth-of-type(2){
         padding-left: 10px;
          >span{
            width: 80px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          h5{
            color: #FF7214;
          }
          div{
            width: 100%;
            >span:first-child{
              font-size: 14px;
              text-decoration: line-through;
            }
            >span:nth-child(2){
              float: right;
              font-size: 12px;
              margin-right: 10px;
              overflow: hidden;
              transform: translateY(-10px);
              font-weight: bold;
              padding: 2px;
              color: #FF7214;
              border-radius: 50%;
              border: 2px solid #FF7214;
             
            }
          }

         
        }
      }
    }
     
}
.el-footer{
  height: 60px;
  width: 100%;
  background-color: #fff;
}
</style>